<template>
  <section>
    <el-row>
      <!--搜索、创建行-->
      <el-col :span="20">
        <el-form :inline="true" size="mini">
          <el-form-item label="选择公司" >
            <el-select v-model="companyId" placeholder="请选择">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择医院" >
            <el-select v-model="departmentId" placeholder="请选择">
              <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询科室" >
            <el-input placeholder="请输入" v-model="form.keyword" @keydown.native.prevent.enter="searchSection"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle  @click="searchSection"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button style="margin-bottom: 20px;text-align: right" @click="creatSection">
          <icon name="plus"></icon>
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <!--科室列表-->
      <el-table :data="sectionList" style="width: 100%" size="small">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="科室">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所处部门">
          <template slot-scope="scope">
            <el-select v-if="scope.row.edit" v-model="scope.row.departmentId" placeholder="请选择">
              <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id"></el-option>
            </el-select>
            <!--<span  v-show="!scope.row.edit">{{scope.row.companyName}}</span>-->
            <span  v-if="!scope.row.edit">{{reHospitalName(scope.row.departmentId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="基础价">
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.basePrice"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.basePrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input  v-show="scope.row.edit" size="small" v-model="scope.row.ps"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.ps}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="small" >DEL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  // import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue"
  import Vue from 'vue'//后续添加属性，需要vue联动

  export default {
    // components: {ElInput},
    name: "dsection",
    data(){
      return {
        hospitalList:[],
        sectionList:[],
        companies:[],
        departments:[],
        companyId:null,
        departmentId:null,
        form: {
          keyword: '',
        },
      }
    },
    watch:{
      companyId(nv,ov){
        if(nv){
          console.log(nv)
          this.sectionList = []
          //nv,公司id，数字，医院类型id,找到部门类型为医院的部门id号
          this.loadDepartments(nv)//加载部门类型为医院的部门列表，用于选择
        }
      },
      departmentId(nv,ov){
        if(nv){
          console.log(nv)
          //加载科室列表，用于显示
          this.loadSectionList(nv)
        }
      }
    },
    created(){
      //加载公司列表，用于选择
      this.loadCompanyList()
    },
    methods:{
      ...mapActions({
        fetch:'fetch'
      }),
      loadCompanyList(){
        //加载公司列表
        this.fetch({name:"getCompanyList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.companies = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      searchSection(){
        console.log('查找科室')
      },
      reHospitalName(e){
        console.log(e)
        if(e){
          let tmpH = this.departments.find(i =>i.id === e)
          if(tmpH)
            return tmpH.name
          else
            return '没找到'
        }else {
          console.log('没e')
        }
      },
      loadSectionList(departmentId){
        console.log('加载科室列表')
        this.fetch({name:"getHisSectionList",data:{departmentId}})//------获取科室列表需要部门id--------------------------
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.sectionList = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadDepartments(companyId){//部门列表

        this.fetch({name:"getDepartmentList",data:{companyId,departmentTypeCode:'hospital_section'}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.departments = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      creatSection(){
        console.log('添加新科室')
        let tb = {name: '',detail: '',edit:true}
        this.sectionList.push(tb)
      },
      confirm(row){
        console.log(row)
        if(row.edit && row.edit === true){//目前是编辑状态
          //判断是否新创建
          if(row.id){//非新建，有id，要更新
            this.updateSection(row)
          }
          else {//新建的，有edit
            //保存新
            this.saveSection(row)
            row.edit = !row.edit
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(row.edit === undefined){
            Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          }else {
            row.edit = true
          }
        }
      },
      updateSection(s){
        this.fetch({name:"updateHisSection",data:{id:1}})//--------------------
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              s.edit = false
              console.log(this.sectionList)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      saveSection(s){
        //'name','hospitalId'
        console.log(s)
        // data:{name:,departmentId:,basePrice:}
        this.fetch({name:"createHisSection",data:s})//-----------------------
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              s.id=res.id
              console.log(this.sectionList)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      del(e){
        console.log(e)
        this.fetch({name:"delHisSection",data:{id:e.row.id}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(this.sectionList)
              this.sectionList.splice(e.$index,1)
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      }

    }
  }
</script>


